import { useEffect, useState } from "react"
import s from "./style.module.less"
import { getUserInfoApi } from "@/apis"
import { Button, List } from "antd-mobile"
import { useNavigate } from "react-router-dom"
function User() {
  const [user, setUser] = useState({})
  const navigate = useNavigate()

  const getUserInfo = async () => {
    const { data } = await getUserInfoApi()
    setUser(data.data)
  }

  useEffect(() => {
    getUserInfo()
  }, [])

  const logout = () => {
    localStorage.removeItem("token")
    navigate("/login")
  }
  return (
    <div className={s.user}>
      <div className={s.head}>
        <div className={s.info}>
          <span className={s.name}>昵称：{user.username || "--"}</span>
          <span className={s.person}>
            <img
              style={{ height: "30px", width: "30px" }}
              src="//s.yezgea02.com/1615973630132/geqian.png"
              alt=""
            />
            <b>{user.signature || "暂无个签"}</b>
          </span>
        </div>
        <img className={s.avatar} src={user.avatar || ""} alt="" />
      </div>
      <div className={s.content}>
        <List.Item
          className={s.listItem}
          onClick={() => {
            navigate("/userinfo")
          }}
        >
          <div className={s.liDetail}>
            <img
              style={{ width: 20, verticalAlign: "-7px" }}
              src="//s.yezgea02.com/1615974766264/gxqm.png"
              alt=""
            />
            <span>用户信息修改</span>
          </div>
        </List.Item>
        <List.Item
          className={s.listItem}
          onClick={() => {
            navigate("/account")
          }}
        >
          <div className={s.liDetail}>
            <img
              style={{ width: 20, verticalAlign: "-7px" }}
              src="//s.yezgea02.com/1615974766264/zhaq.png"
              alt=""
            />
            <span>重置密码</span>
          </div>
        </List.Item>
        <List.Item
          className={s.listItem}
          onClick={() => {
            navigate("/about")
          }}
        >
          <div className={s.liDetail}>
            <img
              style={{ width: 20, verticalAlign: "-7px" }}
              src="//s.yezgea02.com/1615975178434/lianxi.png"
              alt=""
            />
            <span>关于我们</span>
          </div>
        </List.Item>
      </div>
      <div className={s.button}>
        <Button
          block
          color="danger"
          size="large"
          onClick={logout}
          style={{ height: "61px", width: "90%", fontSize: "23px" }}
        >
          退出登录
        </Button>
      </div>
    </div>
  )
}

export default User
